<form nz-form
    [formGroup]="group">

    <nz-form-item>
        <nz-form-label [nzSm]="6"
            [nzXs]="24"
            nzFor="id">ID</nz-form-label>
        <nz-form-control [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="">
            <input nz-input
                formControlName="id"
                placeholder="默认为随机生成" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6"
            [nzXs]="24"
            nzRequired
            nzFor="name">名称</nz-form-label>
        <nz-form-control [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="">
            <input nz-input
                formControlName="name" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6"
            [nzXs]="24"
            nzFor="version">版本</nz-form-label>
        <nz-form-control [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="">
            <input nz-input
                formControlName="version" />
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6"
            [nzXs]="24"
            nzFor="desc">说明</nz-form-label>
        <nz-form-control [nzSm]="14"
            [nzXs]="24"
            nzErrorTip="">
            <nz-textarea-count [nzMaxCharacterCount]="200">
                <textarea rows="4"
                    nz-input
                    formControlName="desc"></textarea>
            </nz-textarea-count>
        </nz-form-control>
    </nz-form-item>

    <nz-form-item>
        <nz-form-label [nzSm]="6"
            [nzXs]="24">图片上传</nz-form-label>
        <nz-form-control [nzSm]="14"
            [nzXs]="24">
            <nz-upload nzAction="/"
                (nzChange)="handleChange($event)">
                <button nz-button>
                    <span nz-icon
                        nzType="upload"></span>
                    点击上传
                </button>
            </nz-upload>
        </nz-form-control>
    </nz-form-item>

    <nz-collapse>
        <!-- 属性start -->
        <nz-collapse-panel nzHeader="属性"
            nzActive>
            <app-edit-table formControlName="properties"
                [items]="listData"></app-edit-table>
        </nz-collapse-panel>
        <!-- 属性end -->

        <ng-template #functionEx>
            <button type="button"
                nz-button
                nzType="primary">
                <i nz-icon
                    nzType="plus"></i>
                添加
            </button>
        </ng-template>
        <nz-collapse-panel nzDisabled
            nzHeader="功能"
            [nzExtra]="functionEx">
            暂不支持
        </nz-collapse-panel>

        <ng-template #eventEx>
            <button type="button"
                nz-button
                nzType="primary">
                <i nz-icon
                    nzType="plus"></i>
                添加
            </button>
        </ng-template>
        <nz-collapse-panel nzDisabled
            nzHeader="事件"
            [nzExtra]="eventEx">
            暂不支持
        </nz-collapse-panel>

        <nz-collapse-panel nzHeader="变量">
            <app-edit-table formControlName="parameters"
                [items]="parameterslistData"></app-edit-table>
        </nz-collapse-panel>

        <nz-collapse-panel nzHeader="数据检查">
            <app-edit-table formControlName="validators"
                [items]="validatorsListData"></app-edit-table>
        </nz-collapse-panel>

        <nz-collapse-panel nzHeader="数据聚合">
            <app-edit-table formControlName="aggregators"
                [items]="aggregatorsListData"></app-edit-table>
        </nz-collapse-panel>
    </nz-collapse>
</form>
